<template>
	<dt-main-body v-model="labelPosition">
		<div class="location">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>
					<i class="iconfont icon-home"></i>
					管理中心
				</el-breadcrumb-item>
				<el-breadcrumb-item>系统管理</el-breadcrumb-item>
				<el-breadcrumb-item>系统设置</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		
		<div class="content-box" v-loading="loading">
			<el-form ref="editForm" :model="model" :rules="rules" :label-position="labelPosition" label-width="120px">
				<el-tabs v-model="activeName" type="card">
					<el-tab-pane label="基本信息" name="info">
						<div class="tab-content">
							<el-form-item prop="webLogo" label="平台LOGO">
								<dt-upload v-model="model.webLogo"></dt-upload>
							</el-form-item>
							<el-form-item prop="webName" label="平台名称">
							    <el-input v-model="model.webName" placeholder="任意字符，控制在255字符内"></el-input>
							</el-form-item>
							<el-form-item prop="webUrl" label="平台域名">
							    <el-input v-model="model.webUrl" placeholder="必填，以http://开头"></el-input>
							</el-form-item>
							<el-form-item prop="webVersion" label="系统版本">
							    <el-input v-model="model.webVersion" placeholder="必填，系统版本号"></el-input>
							</el-form-item>
							<el-form-item label="公司名称">
							    <el-input v-model="model.webCompany" placeholder="可空，控制在128字符内"></el-input>
							</el-form-item>
							<el-form-item label="通讯地址">
							    <el-input v-model="model.webAddress" placeholder="可空，控制在128字符内"></el-input>
							</el-form-item>
							<el-form-item label="联系电话">
							    <el-input v-model="model.webTel" placeholder="可空，区号+电话号码"></el-input>
							</el-form-item>
							<el-form-item label="传真号码">
							    <el-input v-model="model.webFax" placeholder="可空，区号+传真号码"></el-input>
							</el-form-item>
							<el-form-item label="管理员邮箱">
							    <el-input v-model="model.webMail" placeholder="可空，电子邮箱格式"></el-input>
							</el-form-item>
							<el-form-item label="平台备案号">
							    <el-input v-model="model.webCrod" placeholder="可空，控制在128字符内"></el-input>
							</el-form-item>
							<el-form-item label="开启管理日志">
							    <el-switch :active-value="1" :inactive-value="0" v-model="model.logStatus"></el-switch>
							</el-form-item>
							<el-form-item label="网站运行状态">
							    <el-switch :active-value="0" :inactive-value="1" v-model="model.webStatus"></el-switch>
							</el-form-item>
							<el-form-item label="网站关闭原因">
							    <el-input type="textarea" :rows="3" v-model="model.webCloseReason" maxlength="512" show-word-limit></el-input>
							</el-form-item>
						</div>
					</el-tab-pane>
					<el-tab-pane label="短信平台" name="sms">
						<div class="tab-content">
							<el-form-item prop="smsApiUrl" label="短信API地址">
							    <el-input v-model="model.smsApiUrl" placeholder="以“http://”开头"></el-input>
							</el-form-item>
							<el-form-item prop="smsUserName" label="平台登录账户">
							    <el-input v-model="model.smsUserName" placeholder="短信账户注册的用户名"></el-input>
							</el-form-item>
							<el-form-item prop="smsPassword" label="平台通讯密钥">
							    <el-input show-password v-model="model.smsPassword" placeholder="开通短信账户设置的通讯密钥"></el-input>
							</el-form-item>
							<el-form-item label="短信账户余额">
							    <span v-if="smsquantity>=0" style="margin-right:10px;">{{smsquantity}} 条</span> 
							    <el-button :loading="smsloading" @click="getSmsQuantity()" size="mini">查询余额</el-button>
							</el-form-item>
							<el-form-item label="短信平台说明">
								<div class="remark">
									请不要使用系统默认账户test，因为它是公用的测试账号；<br />
									请在短信平台修改账户资料中绑定签名方可使用短信功能；<br />
									如果您尚未申请开通，<a href="http://www.dtcms.net" target="_blank">请点击这里注册</a>均可正常使用
								</div>
							</el-form-item>
						</div>
					</el-tab-pane>
					<el-tab-pane label="邮箱设置" name="email">
						<div class="tab-content">
							<el-form-item label="SSL加密连接">
							    <el-switch :active-value="1" :inactive-value="0" v-model="model.emailSSL"></el-switch>
							</el-form-item>
							<el-form-item prop="emailSmtp" label="STMP服务器">
							    <el-input v-model="model.emailSmtp" placeholder="发送邮件的SMTP服务器地址"></el-input>
							</el-form-item>
							<el-form-item prop="emailPort" label="SMTP端口">
							    <el-input v-model="model.emailPort" placeholder="SMTP服务器端口，一般是25"></el-input>
							</el-form-item>
							<el-form-item prop="emailFrom" label="发件人地址">
							    <el-input v-model="model.emailFrom" placeholder="发件人邮箱地址"></el-input>
							</el-form-item>
							<el-form-item prop="emailUserName" label="邮箱账号">
							    <el-input v-model="model.emailUserName"></el-input>
							</el-form-item>
							<el-form-item prop="emailPassword" label="邮箱密码">
							    <el-input show-password v-model="model.emailPassword"></el-input>
							</el-form-item>
							<el-form-item prop="emailNickname" label="发件人昵称">
							    <el-input v-model="model.emailNickname" placeholder="邮件里显示的昵称"></el-input>
							</el-form-item>
						</div>
					</el-tab-pane>
					<el-tab-pane label="上传设置" name="upload">
						<div class="tab-content">
							<el-form-item prop="fileServer" label="文件服务器">
							    <el-radio-group v-model="model.fileServer">
							        <el-radio-button label="localhost">本地存储</el-radio-button>
							        <el-radio-button label="qiniu">七牛云</el-radio-button>
							        <el-radio-button label="aliyun">阿里云</el-radio-button>
							    </el-radio-group>
							</el-form-item>
							<template v-if="model.fileServer=='qiniu'">
							    <el-form-item prop="kodoBucket" label="空间名称">
							        <el-input v-model="model.kodoBucket" placeholder="七牛云Bucket存储空间名称"></el-input>
							    </el-form-item>
							    <el-form-item prop="kodoDomain" label="绑定域名">
							        <el-input v-model="model.kodoDomain" placeholder="七牛云存储空间绑定域名"></el-input>
							    </el-form-item>
							    <el-form-item prop="kodoAccessKey" label="AccessKey">
							        <el-input v-model="model.kodoAccessKey" placeholder="七牛云AccessKey密钥"></el-input>
							    </el-form-item>
							    <el-form-item prop="kodoSecretKey" label="SecretKey">
							        <el-input v-model="model.kodoSecretKey" placeholder="七牛云SecretKey密钥"></el-input>
							    </el-form-item>
							</template>
							<template v-if="model.fileServer=='aliyun'">
							    <el-form-item prop="ossBucket" label="空间名称">
							        <el-input v-model="model.ossBucket" placeholder="阿里云OSS存储空间名称"></el-input>
							    </el-form-item>
							    <el-form-item prop="ossEndpoint" label="区域外网">
							        <el-input v-model="model.ossEndpoint" placeholder="阿里云OSS对象存储的区域外网(以http开头)"></el-input>
							    </el-form-item>
							    <el-form-item prop="ossDomain" label="绑定域名">
							        <el-input v-model="model.ossDomain" placeholder="阿里云OSS对象存储的自定义访问域名(以http开头)"></el-input>
							    </el-form-item>
							    <el-form-item prop="ossAccessKey" label="AccessKey">
							        <el-input v-model="model.ossAccessKey" placeholder="阿里云OSS对象存储的AccessKey ID"></el-input>
							    </el-form-item>
							    <el-form-item prop="ossSecretKey" label="SecretKey">
							        <el-input v-model="model.ossSecretKey" placeholder="阿里云OSS对象存储的AccessKey Secret"></el-input>
							    </el-form-item>
							</template>
							<el-form-item prop="filePath" label="上传目录名">
							    <el-input v-model="model.filePath" placeholder="文件夹目录名称"></el-input>
							</el-form-item>
							<el-form-item prop="fileSave" label="文件保存方式">
							    <el-select v-model="model.fileSave" placeholder="请选择...">
							        <el-option label="按年月日每天一个目录" :value="1"></el-option>
							        <el-option label="按年月/日/存入不同目录" :value="2"></el-option>
							    </el-select>
							</el-form-item>
							<el-form-item label="编辑器图片">
							    <el-radio-group v-model="model.fileRemote">
							        <el-radio-button label="0">禁止下载</el-radio-button>
							        <el-radio-button label="1">自动下载</el-radio-button>
							    </el-radio-group>
							</el-form-item>
							<el-form-item prop="fileExtension" label="文件上传类型">
							    <el-input v-model="model.fileExtension" placeholder="以英文逗号分隔开,如:“jpg,png”"></el-input>
							</el-form-item>
							<el-form-item prop="videoExtension" label="视频上传类型">
							    <el-input v-model="model.videoExtension" placeholder="以英文逗号分隔开,如:“mp4,flv”"></el-input>
							</el-form-item>
							<el-form-item prop="attachSize" label="附件上传大小">
							    <el-input v-model="model.attachSize" placeholder="单位KB，0不限制">
							        <template slot="append">
							            KB
							        </template>
							    </el-input>
							</el-form-item>
							<el-form-item prop="videoSize" label="视频上传大小">
							    <el-input v-model="model.videoSize" placeholder="单位KB，0不限制">
							        <template slot="append">
							            KB
							        </template>
							    </el-input>
							</el-form-item>
							<el-form-item prop="imgSize" label="图片上传大小">
							    <el-input v-model="model.imgSize" placeholder="单位KB，0不限制">
							        <template slot="append">
							            KB
							        </template>
							    </el-input>
							</el-form-item>
							<el-form-item label="图片最大尺寸">
							    <el-col :span="11">
							        <el-input v-model="model.imgMaxHeight" style="width:100%;" placeholder="高度">
							            <template slot="append">
							                高/px
							            </template>
							        </el-input>
							    </el-col>
							    <el-col class="line" :span="2">*</el-col>
							    <el-col :span="11" :rules="rules.imgSize">
							        <el-input v-model="model.imgMaxWidth" style="width:100%;" placeholder="宽度">
							            <template slot="append">
							                宽/px
							            </template>
							        </el-input>
							    </el-col>
							</el-form-item>
							<el-form-item label="缩略图尺寸">
							    <el-col :span="11">
							        <el-input v-model="model.thumbnailHeight" style="width:100%;" placeholder="高度">
							            <template slot="append">
							                高/px
							            </template>
							        </el-input>
							    </el-col>
							    <el-col class="line" :span="2">*</el-col>
							    <el-col :span="11">
							        <el-input v-model="model.thumbnailWidth" style="width:100%;" placeholder="宽度">
							            <template slot="append">
							                宽/px
							            </template>
							        </el-input>
							    </el-col>
							</el-form-item>
							<el-form-item prop="thumbnailMode" label="缩略图生成方式">
							    <el-radio-group v-model="model.thumbnailMode">
							        <el-radio-button label="Cut">中心裁剪</el-radio-button>
							        <el-radio-button label="HW">两边补白</el-radio-button>
							    </el-radio-group>
							</el-form-item>
							<el-form-item prop="watermarkType" label="图片水印类型">
							    <el-radio-group v-model="model.watermarkType">
							        <el-radio-button label="0">不启用</el-radio-button>
							        <el-radio-button label="1">文字水印</el-radio-button>
							        <el-radio-button label="2">图片水印</el-radio-button>
							    </el-radio-group>
							</el-form-item>
							<el-form-item prop="watermarkPosition" label="图片水印位置">
							    <el-select v-model="model.watermarkPosition" placeholder="请选择...">
							        <el-option label="左上" :value="1"></el-option>
							        <el-option label="中上" :value="2"></el-option>
							        <el-option label="右上" :value="3"></el-option>
							        <el-option label="左中" :value="4"></el-option>
							        <el-option label="居中" :value="5"></el-option>
							        <el-option label="右中" :value="6"></el-option>
							        <el-option label="左下" :value="7"></el-option>
							        <el-option label="中下" :value="8"></el-option>
							        <el-option label="右下" :value="9"></el-option>
							    </el-select>
							</el-form-item>
							<el-form-item prop="watermarkPic" label="图片水印文件">
							    <el-input v-model="model.watermarkPic" placeholder="需存放wwwroot根目录下,没有使用文字水印"></el-input>
							</el-form-item>
							<el-form-item label="图片生成质量">
							    <el-slider v-model="model.watermarkImgQuality" show-input></el-slider>
							</el-form-item>
							<el-form-item label="水印透明度">
								<el-slider v-model="model.watermarkTransparency" show-input :max="10"></el-slider>
							</el-form-item>
							<el-form-item prop="watermarkFont" label="水印字体">
							    <el-select v-model="model.watermarkFont" placeholder="请选择...">
							        <el-option label="Arial" value="Arial"></el-option>
							        <el-option label="Symbol" value="Symbol"></el-option>
							        <el-option label="Tahoma" value="Tahoma"></el-option>
							        <el-option label="Verdana" value="Verdana"></el-option>
							        <el-option label="仿宋_GB2312" value="仿宋_GB2312"></el-option>
							        <el-option label="宋体" value="宋体"></el-option>
							        <el-option label="新宋体" value="新宋体"></el-option>
							        <el-option label="楷体_GB2312" value="楷体_GB2312"></el-option>
							        <el-option label="微软雅黑" value="微软雅黑"></el-option>
							        <el-option label="黑体" value="黑体"></el-option>
							    </el-select>
							</el-form-item>
							<el-form-item prop="watermarkText" label="水印文字">
							    <el-input v-model="model.watermarkText" placeholder="文字水印的内容"></el-input>
							</el-form-item>
							<el-form-item prop="watermarkFontSize" label="文字大小px">
							    <el-input v-model="model.watermarkFontSize" placeholder="文字水印的大小">
							        <template slot="append">
							            px
							        </template>
							    </el-input>
							</el-form-item>
						</div>
					</el-tab-pane>
				</el-tabs>
			</el-form>
		</div>
		
		<div class="footer-box">
			<div class="footer-btn">
				<el-button type="primary" @click="submitForm">确认保存</el-button>
				<el-button plain @click="$common.back()">返回上一页</el-button>
			</div>
		</div>
	</dt-main-body>
</template>

<script>
	import DtUpload from '../../components/DtUpload.vue'
	
	export default {
		components: {
			DtUpload
		},
		props: {
			id: 0
		},
		data() {
			return {
				activeName: 'info', //当前选项卡
				labelPosition: 'right', //表单对齐方式
				loading: false,
				smsloading: false,
				smsquantity: -1,
				model: {
					webName: null,
					webUrl: null,
					webLogo: null,
					webVersion: null,
					webCompany: null,
					webAddress: null,
					webTel: null,
					webFax: null,
					webMail: null,
					webCrod: null,
					logStatus: null,
					webStatus: 0,
					webCloseReason: null,
					smsApiUrl: null,
					smsUserName: null,
					smsPassword: null,
					emailSmtp: null,
					emailSSL: 0,
					emailPort: 0,
					emailFrom: null,
					emailUserName: null,
					emailPassword: null,
					emailNickname: null,
					filePath: null,
					fileSave: 0,
					fileRemote: 0,
					fileExtension: null,
					videoExtension: null,
					attachSize: 0,
					videoSize: 0,
					imgSize: 0,
					imgMaxHeight: 0,
					imgMaxWidth: 0,
					thumbnailHeight: 0,
					thumbnailWidth: 0,
					thumbnailMode: null,
					watermarkType: 0,
					watermarkPosition: 0,
					watermarkImgQuality: 0,
					watermarkPic: null,
					watermarkTransparency: 0,
					watermarkText: null,
					watermarkFont: null,
					watermarkFontSize: 0,
					fileServer: null,
					kodoBucket: null,
					kodoDomain: null,
					kodoAccessKey: null,
					kodoSecretKey: null,
					ossBucket: null,
					ossEndpoint: null,
					ossDomain: null,
					ossAccessKey: null,
					ossSecretKey: null
				},
				rules: {
					webName: [
						{ required: true, message: '请填写主站的名称', trigger: 'blur' }
					],
					webUrl: [
						{ required: true, message: '请填写主站的域名', trigger: 'blur' }
					],
					webVersion: [
						{ required: true, message: '请填写系统版本号', trigger: 'blur' }
					],
					smsApiUrl: [
						{ required: true, message: '请填写短信API地址', trigger: 'blur' }
					],
					smsUserName: [
						{ required: true, message: '请填写平台登录账户', trigger: 'blur' }
					],
					smsPassword: [
						{ required: true, message: '请填写平台通讯密钥', trigger: 'blur' }
					],
					emailSmtp: [
						{ required: true, message: '请填写邮箱SMTP服务器地址', trigger: 'blur' }
					],
					emailPort: [
						{ required: true, message: '请填写邮箱SMTP服务器端口', trigger: 'blur' }
					],
					emailFrom: [
						{ required: true, message: '请填写邮箱发件人地址', trigger: 'blur' }
					],
					emailUserName: [
						{ required: true, message: '请填写邮箱账号', trigger: 'blur' }
					],
					emailPassword: [
						{ required: true, message: '请填写邮箱密码', trigger: 'blur' }
					],
					emailNickname: [
						{ required: true, message: '请填写发件人昵称', trigger: 'blur' }
					],
					filePath: [
						{ required: true, message: '请填写上传目录名', trigger: 'blur' }
					],
					fileSave: [
						{ required: true, message: '请选择文件保存方式', trigger: 'change' }
					],
					fileExtension: [
						{ required: true, message: '请填写允许文件上传扩展名', trigger: 'blur' }
					],
					videoExtension: [
						{ required: true, message: '请填写允许视频上传扩展名', trigger: 'blur' }
					],
					attachSize: [
						{ required: true, message: '请填写附件上传大小KB', trigger: 'blur' },
						{ pattern: /^[0-9]*[1-9][0-9]*$/, message: '只能输入整数', trigger: 'blur' }
					],
					videoSize: [
						{ required: true, message: '请填写视频上传大小KB', trigger: 'blur' },
						{ pattern: /^[0-9]*[1-9][0-9]*$/, message: '只能输入整数', trigger: 'blur' }
					],
					imgSize: [
						{ required: true, message: '请填写图片上传大小KB', trigger: 'blur' },
						{ pattern: /^[0-9]*[1-9][0-9]*$/, message: '只能输入整数', trigger: 'blur' }
					],
					thumbnailMode: [
						{ required: true, message: '请选择缩略图生成方式', trigger: 'change' }
					],
					watermarkType: [
						{ required: true, message: '请选择图片水印类型', trigger: 'change' }
					],
					watermarkPosition: [
						{ required: true, message: '请选择图片水印位置', trigger: 'change' }
					],
					watermarkPic: [
						{ required: true, message: '请填写图片水印文件路径', trigger: 'blur' }
					],
					watermarkText: [
						{ required: true, message: '请填写文字水印内容', trigger: 'blur' }
					],
					watermarkFont: [
						{ required: true, message: '请选择水印字体', trigger: 'change' }
					],
					watermarkFontSize: [
						{ required: true, message: '请填写水印的文字大小', trigger: 'blur' }
					],
					imageSize: [
						{ required: true, message: '请填写尺寸大小', trigger: 'blur' },
						{ pattern: /^[0-9]*[1-9][0-9]*$/, message: '只能输入整数', trigger: 'blur' }
					],
					fileServer: [
						{ required: true, message: '请选择文件存储服务器', trigger: 'change' }
					],
					kodoBucket: [
						{ required: true, message: '请填写七牛云Bucket存储空间名称', trigger: 'blur' }
					],
					kodoDomain: [
						{ required: true, message: '请填写七牛云存储空间绑定域名', trigger: 'blur' }
					],
					kodoAccessKey: [
						{ required: true, message: '请填写七牛云AccessKey密钥', trigger: 'blur' }
					],
					kodoSecretKey: [
						{ required: true, message: '请填写七牛云SecretKey密钥', trigger: 'blur' }
					],
					ossBucket: [
						{ required: true, message: '请填写阿里云OSS对象存储空间名称', trigger: 'blur' }
					],
					ossEndpoint: [
						{ required: true, message: '请填写阿里云OSS对象存储的区域外网', trigger: 'blur' }
					],
					ossDomain: [
						{ required: true, message: '请填写阿里云OSS对象存储的自定义访问域名', trigger: 'blur' }
					],
					ossAccessKey: [
						{ required: true, message: '请填写阿里云OSS对象存储的Access KeyId', trigger: 'blur' }
					],
					ossSecretKey: [
						{ required: true, message: '请填写阿里云OSS对象存储的Access KeySecret', trigger: 'blur' }
					]
				}
			}
		},
		methods: {
			//初始化数据
			initData() {
				let _this = this; //当前页面
				//查询系统设置
				_this.$api.request({
					url: '/admin/setting/sysconfig',
					beforeSend() {
						_this.loading = true
					},
					success(res) {
						//赋值给model
						Object.keys(_this.model).forEach(key => { _this.model[key] = res.data[key] });
					},
					complete() {
						_this.loading = false
					}
				});
			},
			//提交表单
			submitForm() {
				let _this = this; //当前页面
				//多个表单验证
				const f1 = new Promise((resolve, reject) => {
					_this.$refs['editForm'].validate((valid) => {
						if (valid) resolve()
					});
				});
				Promise.all([f1]).then(() => {
					_this.$api.request({
						method: 'put',
						url: '/admin/setting/sysconfig',
						data: _this.model,
						loading: true,
						successMsg: '系统设置已成功修改',
						success(res) {
						    //可写回调处理
						}
					});
				})
			},
			//查询短信余额
			getSmsQuantity() {
				let _this = this;
				_this.smsloading = true;
				_this.$api.request({
					url: '/admin/setting/sms/account/quantity',
					success(res) {
						_this.smsloading = false;
						_this.smsquantity = res.data.message;
					}
				});
			},
		},
		created() {
			this.initData();
		}
	}
</script>

<style lang="scss">
	.remark {
		color: #f90;
		line-height: 24px;
		a {
			color: #e14b00;
			text-decoration: none;
		}
	}
</style>